<template>
  <div class="scene-container">
    <!-- <div class="back">
      <el-button type="primary" @click="()=>{this.$router.go(-1)}" icon="el-icon-arrow-left">
          返回
      </el-button>
    </div> -->

    <div class="header">
      <div class="round-info">
        <span class="round-text">第 1 轮</span>
        <!-- <span class="timer">剩余时间: {{ minutes }}:{{ seconds }}</span> -->
      </div>
      <div class="btn">
        <el-button  @click="nextRound" icon="el-icon-arrow-right">
          
        </el-button>
        <!-- <el-button type="primary" @click="dialogVisible = true">确定</el-button> -->
      </div>
    </div>

    <el-divider />
    <!-- 卡片网格 -->
    <div class="container">
      <div class="card-grid" v-if="!selectedCard">
        <transition-group name="shuffle" tag="div" class="grid-container">
          <div
            v-for="(scene, index) in shuffledScenes"
            :key="scene.id"
            class="scene-card"
            :class="{
              'is-flipped': selectedNumber === scene.id,
              'is-completed': completedCards.includes(scene.id),
              'shuffle-animation': isShuffling,
            }"
            @click="selectCard(scene.id)"
          >
            <div class="card-face card-front" style="background-color: #f53f3f">
              <span class="card-number">{{ index + 1 }}</span>
              <span
                v-if="completedCards.includes(scene.id)"
                class="completed-mark"
                >已完成</span
              >
            </div>
            <div class="card-face card-back">
              <h3>场景 {{ index + 1 }}</h3>
            </div>
          </div>
        </transition-group>
      </div>
      <!-- 选中的场景题详情 -->
      <div v-else class="scene-detail">
        <div class="scene-content">
          <div class="header-row">
            <h2>场景 {{ selectedNumber }}</h2>
            <div class="timer" :class="{ warning: timeLeft <= 60 }">
              剩余时间: {{ formatTime(timeLeft) }}
            </div>
          </div>
          <div class="question">
            <h3>题目描述：</h3>
            <p>{{ currentScene.content }}</p>
          </div>

          <el-button
            type="primary"
            @click="showAnalysis = !showAnalysis"
            class="analysis-btn"
          >
            {{ showAnalysis ? "隐藏分析" : "查看分析" }}
          </el-button>
          <el-button @click="completeAndReturn" class="back-btn"
            >完成并返回</el-button
          >

          <div class="analysis" v-if="showAnalysis">
            <h3>得分点分析：</h3>
            <ol>
              <li v-for="(point, index) in currentScene.analysis" :key="index">
                {{ point }}
              </li>
            </ol>
          </div>

          <!-- <el-button @click="completeAndReturn" class="back-btn">完成并返回</el-button> -->
        </div>
      </div>
    </div>

    <!-- <el-card class="tooltip" style="width: 97.5%; margin-top: 10px;position: fixed; bottom: 10px;opacity: 0.3; ">
      <el-button type="primary" @click="()=>this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button type="primary" @click="()=>this.$router.push({name:'QuickRequired'})" icon="el-icon-arrow-right" style="float: right;">
      </el-button>
    </el-card> -->
    <div class="btn">
      <el-button @click="() => this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button
        @click="() => this.$router.push({ name: 'QuickRequired' })"
        icon="el-icon-arrow-right"
        style="float: right"
      >
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "SceneQuState",

  data() {
    return {
      selectedNumber: null,
      selectedCard: null,
      showAnalysis: false,
      completedCards: [],
      isShuffling: false,
      timeLeft: 180, // 3分钟倒计时
      timer: null,
      sceneList: [
        {
          id: 1,
          content:
            "辖区居民张三和李四为夫妻关系，丈夫张三多次家暴妻子李四，针对该情况，请结合有关法律法规和公安部《社区警务工作规范》要求，阐述社区民警应该做哪些工作？与法院以及工会、妇联等单位如何联动处置？",
          analysis: [
            "作为特定对象纳入管控。家庭暴力加害人属于特定对象范畴，应纳入省厅一体化系统进行管控。",
            "制作家暴告诫书。对家庭暴力情节较轻，依法不给予治安管理处罚并符合《湖南省家庭暴力告诫制度实施办法》第四条规定告诫情形的，应当由行为发生地公安派出所依法受理为行政案件，自受理家庭暴力报警之日起三日内作出告诫决定，制作《家庭暴力告诫书》并送达。",
            "定期查访。在送达告诫书后七日内，社区民警应当进行查访，监督其不再实施家庭暴力。首次查访未发现再次实施家庭暴力的，每三个月进行一次查访。连续三次未发现加害人再次实施家庭暴力的，不再查访。查访发现加害人再次实施家庭暴力的，依法追究法律责任。查访对象包括加害人、受害人，还可以视情查访共同居住人及其他知情人。",
            "人身安全保护令。当事人是无民事行为能力人、限制民事行为能力人，或者因受到强制、威吓等原因无法申请人身安全保护令的，公安机关可以代为申请。人民法院作出人身安全保护令后，公安机关应当采取措施协助执行。",
            "法治教育。社区民警可以根据查访情况，联合工会、共产主义青年团、妇女联合会、残疾人联合会、村（居）民委员会等有关组织工作人员，对加害人进行法治教育。",
          ],
        },
        {
          id: 2,
          content: "防溺水",
          analysis: [
            "作为特定对象纳入管控。家庭暴力加害人属于特定对象范畴，应纳入省厅一体化系统进行管控。",
            "制作家暴告诫书。对家庭暴力情节较轻，依法不给予治安管理处罚并符合《湖南省家庭暴力告诫制度实施办法》第四条规定告诫情形的，应当由行为发生地公安派出所依法受理为行政案件，自受理家庭暴力报警之日起三日内作出告诫决定，制作《家庭暴力告诫书》并送达。",
            "定期查访。在送达告诫书后七日内，社区民警应当进行查访，监督其不再实施家庭暴力。首次查访未发现再次实施家庭暴力的，每三个月进行一次查访。连续三次未发现加害人再次实施家庭暴力的，不再查访。查访发现加害人再次实施家庭暴力的，依法追究法律责任。查访对象包括加害人、受害人，还可以视情查访共同居住人及其他知情人。",
            "人身安全保护令。当事人是无民事行为能力人、限制民事行为能力人，或者因受到强制、威吓等原因无法申请人身安全保护令的，公安机关可以代为申请。人民法院作出人身安全保护令后，公安机关应当采取措施协助执行。",
            "法治教育。社区民警可以根据查访情况，联合工会、共产主义青年团、妇女联合会、残疾人联合会、村（居）民委员会等有关组织工作人员，对加害人进行法治教育。",
          ],
        },
        {
          id: 3,
          content: "防未成年人性侵",
          analysis: [
            "作为特定对象纳入管控。家庭暴力加害人属于特定对象范畴，应纳入省厅一体化系统进行管控。",
            "制作家暴告诫书。对家庭暴力情节较轻，依法不给予治安管理处罚并符合《湖南省家庭暴力告诫制度实施办法》第四条规定告诫情形的，应当由行为发生地公安派出所依法受理为行政案件，自受理家庭暴力报警之日起三日内作出告诫决定，制作《家庭暴力告诫书》并送达。",
            "定期查访。在送达告诫书后七日内，社区民警应当进行查访，监督其不再实施家庭暴力。首次查访未发现再次实施家庭暴力的，每三个月进行一次查访。连续三次未发现加害人再次实施家庭暴力的，不再查访。查访发现加害人再次实施家庭暴力的，依法追究法律责任。查访对象包括加害人、受害人，还可以视情查访共同居住人及其他知情人。",
            "人身安全保护令。当事人是无民事行为能力人、限制民事行为能力人，或者因受到强制、威吓等原因无法申请人身安全保护令的，公安机关可以代为申请。人民法院作出人身安全保护令后，公安机关应当采取措施协助执行。",
            "法治教育。社区民警可以根据查访情况，联合工会、共产主义青年团、妇女联合会、残疾人联合会、村（居）民委员会等有关组织工作人员，对加害人进行法治教育。",
          ],
        },
        {
          id: 4,
          content: "防校园霸凌",
          analysis: [
            "作为特定对象纳入管控。家庭暴力加害人属于特定对象范畴，应纳入省厅一体化系统进行管控。",
            "制作家暴告诫书。对家庭暴力情节较轻，依法不给予治安管理处罚并符合《湖南省家庭暴力告诫制度实施办法》第四条规定告诫情形的，应当由行为发生地公安派出所依法受理为行政案件，自受理家庭暴力报警之日起三日内作出告诫决定，制作《家庭暴力告诫书》并送达。",
            "定期查访。在送达告诫书后七日内，社区民警应当进行查访，监督其不再实施家庭暴力。首次查访未发现再次实施家庭暴力的，每三个月进行一次查访。连续三次未发现加害人再次实施家庭暴力的，不再查访。查访发现加害人再次实施家庭暴力的，依法追究法律责任。查访对象包括加害人、受害人，还可以视情查访共同居住人及其他知情人。",
            "人身安全保护令。当事人是无民事行为能力人、限制民事行为能力人，或者因受到强制、威吓等原因无法申请人身安全保护令的，公安机关可以代为申请。人民法院作出人身安全保护令后，公安机关应当采取措施协助执行。",
            "法治教育。社区民警可以根据查访情况，联合工会、共产主义青年团、妇女联合会、残疾人联合会、村（居）民委员会等有关组织工作人员，对加害人进行法治教育。",
          ],
        },
      ],
    };
  },

  computed: {
    currentScene() {
      return (
        this.sceneList.find((scene) => scene.id === this.selectedNumber) || {}
      );
    },
    shuffledScenes() {
      return [...this.sceneList].sort(() => Math.random() - 0.5);
    },
  },

  methods: {
    nextRound() {
      location.reload();
    },

    selectCard(number) {
      if (this.completedCards.includes(number)) {
        return;
      }
      this.selectedNumber = number;
      setTimeout(() => {
        this.selectedCard = number;
        this.startTimer();
      }, 500);
    },

    completeAndReturn() {
      if (!this.completedCards.includes(this.selectedNumber)) {
        this.completedCards.push(this.selectedNumber);
      }
      this.selectedCard = null;
      this.selectedNumber = null;
      this.showAnalysis = false;
      this.clearTimer();
      this.startShuffleAnimation();
    },

    startShuffleAnimation() {
      this.isShuffling = true;
      setTimeout(() => {
        this.isShuffling = false;
      }, 1000);
    },

    startTimer() {
      this.timeLeft = 180;
      this.clearTimer();
      this.timer = setInterval(() => {
        if (this.timeLeft > 0) {
          this.timeLeft--;
        } else {
          this.completeAndReturn();
        }
      }, 1000);
    },

    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },

    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
    },
  },

  mounted() {
    this.startShuffleAnimation();
  },

  beforeDestroy() {
    this.clearTimer();
  },
};
</script>

<style lang="scss" scoped>
.scene-container {
  // padding: 20px;
  font-size: 16px;

  width: 100%;
  height: 100%;
  background-image: url("/images/bg.png");
  background-size: cover;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // position: relative;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 20px; */
}

.round-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.round-text {
  font-size: 24px;
  font-weight: bold;
  /* color: #409eff; */
  color: white;
}

.timer {
  font-size: 24px;
  color: #f56c6c;
  font-weight: bold;
}

.el-divider {
  margin: 20px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.timer {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;

  &.warning {
    color: #f56c6c;
    animation: pulse 1s infinite;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.back {
  display: flex;
  justify-content: start;
}

.nextround {
  position: absolute;
  // right: 10px;
  top: 10px;
  width: 100%;
  display: flex;
  justify-content: end;
  // margin-right: 10px;
  .el-button {
    // width: 200px;
    margin-top: 10px;
    font-size: 26px;
    opacity: 0.3;
  }
}


.container{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-grid {
  // position: absolute;
  // bottom: 20%;
  // left: 12%;
  // min-width: 1600px;
  width: 99%;
  height: 600px;
  border-radius: 10px;
  display: grid;
  // grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  gap: 20px;
  padding: 20px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  display: contents;
}

.scene-card {
  position: relative;
  height: 200px;
  width: 200px;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  // background-color: red;
  &.shuffle-animation {
    animation: shuffleCards 1s ease-in-out;
  }

  &.is-flipped .card-face {
    transform: rotateY(180deg);
  }

  &.is-completed {
    cursor: not-allowed;
    opacity: 0.7;
    .card-face {
      background: #f5f7fa;
      // background: red;
    }

    .card-number {
      color: #909399;
    }
  }
}

@keyframes shuffleCards {
  0% {
    transform: translateY(-100vh) rotate(-180deg);
    opacity: 0;
  }
  60% {
    transform: translateY(30px) rotate(20deg);
    opacity: 0.6;
  }
  80% {
    transform: translateY(-10px) rotate(-5deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
}

.card-face {
  position: absolute;
  // left: 100%;
  width: 200px;
  height: 200px;
  backface-visibility: hidden;
  transition: transform 0.6s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin: 50px;
  &.card-back {
    transform: rotateY(180deg);
    background: #409eff;
    color: white;

    h3 {
      font-size: 24px;
    }
  }
}

.card-number {
  font-size: 48px;
  font-weight: bold;
  // color: #409EFF;
  color: white;
}

.completed-mark {
  margin-top: 10px;
  font-size: 18px;
  color: #909399;
}

.scene-detail {
  max-width: 1000px;
  min-width: 800px;
  margin: 10px auto;
  padding: 10px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  // height: 100%;
  h2 {
    font-size: 32px;
    margin-bottom: 20px;
  }

  .question {
    margin-bottom: 20px;

    h3 {
      font-size: 24px;
      color: #303133;
      margin-bottom: 15px;
    }

    p {
      font-size: 18px;
      line-height: 1.8;
      color: #606266;
    }
  }

  .analysis {
    // margin-top: 20px;
    padding: 10px;
    background: #f5f7fa;
    border-radius: 4px;
    // height: 340px;
    h3 {
      font-size: 24px;
      color: #409eff;
      margin-bottom: 10px;
    }

    ol {
      padding-left: 20px;

      li {
        font-size: 20px;
        margin-bottom: 12px;
        // line-height: 1.6;
        color: #606266;
      }
    }
  }

  .analysis-btn {
    margin: 20px 0;
    font-size: 18px;
    padding: 12px 24px;
  }

  .back-btn {
    margin-top: 20px;
    font-size: 18px;
    padding: 12px 24px;
  }
}

.shuffle-move {
  transition: transform 0.5s;
}

.btn {
  width: 100%;
  bottom: 20px;
  position: fixed;
  opacity: 0.3;
  z-index: 1;
  padding: 0 10px;
}
</style>